<!-- 新增角色 -->
<template>
	<div class="newlyRoleManage">
		<el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%" center
			top="25vh" @close="backstep">
			<el-form ref="form" :model="form" label-width="90px" style="margin-top:20px" :rules="rules">
				<el-form-item label="角色名称" prop="arName">
					<el-input v-model.trim="form.arName"></el-input>
				</el-form-item>
				<el-form-item label="角色编码" prop="arCode">
					<el-input v-model.trim="form.arCode"></el-input>
				</el-form-item>
				<el-form-item label="角色描述" style="margin-top:10px" prop="arRemark">
					<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 5}" v-model.trim="form.arRemark">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button v-blur class="added" @click="submit">提 交</el-button>
				<el-button v-blur class="query" @click="backstep">返 回</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import '@/assets/queryPublic.css'
	import api from '@/api/systemManagement/RolesPermissions/roleManage.js'
	export default {
		name: 'newlyRoleManage',
		data() {
			return {
				title: '新增角色',
				dialogVisible: false,
				form: {
					arName: '',
					arCode: '',
					arRemark: '',
					arId: '',
				},
				rules: {
					arName: [{
						required: true,
						message: '请输入角色名称',
						trigger: 'blur'
					}],
					arCode: [{
						required: true,
						message: '请输入角色编码',
						trigger: 'blur'
					}],
					arRemark: [{
						required: true,
						message: '请输入角色描述',
						trigger: 'blur'
					}],
				}

			}
		},
		mounted() {

		},
		methods: {
			show(r) {
				if (r) {
					this.title = '修改角色';
					this.form = {
						...r
					};
				} else {
					this.form.arId = '';
					this.form.arName = '';
					this.form.arCode = '';
					this.form.arRemark = '';
				}
				this.dialogVisible = true;
			},
			async submit() {
				if (!await this.$FormCheck('form')) {
					this.$message.error("请您核实填写内容");
					return;
				}
				api.addOrUpdateRole(this.form).then(res => {
					if (res.data && res.data.code == 200) {
						this.$message.success('操作成功')
						this.dialogVisible = false;
						this.$refs.form.resetFields();
						this.$parent.GetList();
					} else {
						this.$message.error(res.data.msg)
					}
				})
			},
			backstep() {
				this.dialogVisible = false;
				this.$refs.form.resetFields();
			}
		}
	}
</script>

<style scoped lang='scss'>
	/* 滚动条 */
	::-webkit-scrollbar {
		width: 8px;
		height: 100%;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px #F4F8FF;
		box-shadow: inset 0 0 5px #F4F8FF;
		background: #F4F8FF;
	}

	::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		// -webkit-box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// box-shadow: inset 0 0 5px rgba(14,54,94, 0.2);
		// border-radius: 5px;
		// background: rgba(14,54,94, 0.1);
	}

	/deep/.el-dialog__body {
		height: 27vh;
	}

	.el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
		width: 100%;
	}

	/deep/.el-form-item__error {
		display: block;
		line-height: 10px;
	}

	/deep/.el-form-item__label {
		line-height: 35px;
	}

	/deep/.el-form-item {
		margin-bottom: 20px;
	}
</style>
